<template>
  <el-dialog
    :visible.sync="showDialog.show"
    :close-on-click-modal="false"
    :lock-scroll="false"
    top="12vh"
    width="500px"
    class="dialog"
    @closed="closed"
  >
    <div slot="title" style="font-size:18px">
      <span>欢迎来到 神马音乐</span>
    </div>
    <div v-show="mode === 'login'">
      <el-tabs
        :stretch="true"
        class="tabs"
        v-model="loginMode"
        @tab-click="tabClick"
      >
        <el-tab-pane label="手机登录" name="phone">
          <login
            @setMode="setMode"
            ref="phoneForm"
            @loginDone="loginDone"
          ></login>
        </el-tab-pane>
        <el-tab-pane label="邮箱登录" name="email">
          <login @setMode="setMode" ref="emailForm"></login>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-show="mode === 'registry'">
      <el-tabs :stretch="true" v-model="registryMode" class="tabs">
        <el-tab-pane label="手机注册" name="phone_registry">
          <registry ref="registryCom" @setMode="setMode"></registry>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script>
import login from './login'
import registry from './registry'
export default {
  name: 'my-dialog',
  watch: {
    mode () {
      this.$refs.phoneForm.$refs.loginForm.resetFields()
      this.$refs.registryCom.$refs.registryForm.resetFields()
    }
  },
  provide () {
    return {
      phoneOrEmail: this.phoneOrEmail
    }
  },
  components: { login, registry },
  data () {
    return {
      loginMode: 'phone',
      registryMode: 'phone_registry',
      // 显示登录或注册
      mode: 'login',
      // 显示手机号或邮箱
      phoneOrEmail: { name: 'phone' }
    }
  },
  props: {
    showDialog: {
      type: Object
    }
  },

  methods: {
    // 登录完毕
    loginDone () {
      this.showDialog.show = false
    },
    // dialog关闭后事件
    closed () {
      // 恢复表单默认数据
      this.$refs.registryCom.$refs.registryForm.resetFields()
      this.$refs.phoneForm.$refs.loginForm.resetFields()
    },

    // 修改mode
    setMode (mode) {
      this.mode = mode
    },
    // tab栏修改
    tabClick (tabInstance) {
      this.phoneOrEmail.name = tabInstance.name
      if (tabInstance.name === 'phone') {
        this.$refs.emailForm.$refs.loginForm.resetFields()
        this.$nextTick(() => {
          this.$refs.emailForm.$refs.loginForm.clearValidate()
        })
      } else {
        this.$refs.phoneForm.$refs.loginForm.resetFields()
        this.$nextTick(() => {
          this.$refs.phoneForm.$refs.loginForm.clearValidate()
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-dialog__wrapper {
  overflow: visible;
  /deep/ .el-dialog__body {
    padding: 10px 0;
  }
}
.dialog {
  /deep/ .el-dialog__header {
    background-color: #121212;
    > div,
    button i {
      color: @main-font-color;
    }
  }
  .tabs {
    /deep/ .el-tabs__header {
      display: flex;
      justify-content: center;
      -webkit-box-pack: center;
      margin-bottom: 30px;
      .el-tabs__nav-wrap {
        &::after {
          background-color: transparent;
        }
        .el-tabs__active-bar {
          height: 4px;
          background-color: #63dbc1;
        }
        .el-tabs__item:hover {
          color: #333;
        }
        .el-tabs__item {
          &.is-active {
            color: #333;
          }
        }
      }
    }
  }
}
</style>
